<script>
import LanguageDialog from "/src/components/common/LanguageDialog.vue";

export default {
  components: {LanguageDialog}
}

</script>

<template>
  <main
      v-if="$i18n.getLanguageCode()=== 'en'"
      class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
    <div class="text-center">
      <div>
        <img src="/404.svg"
        class="img-404"
        />
      </div>
      <h1 class="mt-4 text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">Page not found</h1>
      <p class="mt-6 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">Sorry, we couldn’t find the page you’re
        looking for.</p>
      <div class="mt-10 flex items-center justify-center gap-x-6">
        <a href="#"
           class="rounded-md px-3.5 py-2.5 font-semibold text-white shadow-sm focus-visible:outline
           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
           bg-black">Go
          back home</a>
        <a href="#" class="text-sm font-semibold text-gray-900">Contact support <span
            aria-hidden="true">&rarr;</span></a>
      </div>
    </div>
  </main>
  <main
      v-else
      class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
    <div class="text-center">
            <div>
        <img src="/404.svg"
        class="img-404"
        />
      </div>

      <h1 class="mt-4 text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">{{$i18n.enToGlobal("Page not found")}}</h1>
      <h4 class="mt-4 text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-3xl">{{"Page not found"}}</h4>
      <div class="mt-6 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">{{$i18n.enToGlobal("Sorry, we couldn't find the page you're looking for.")}}</div>
      <div class=" text-pretty text-lg font-medium text-gray-500 sm:text-xl/2">{{"Sorry, we couldn't find the page you're looking for."}}</div>
      <div class="mt-10 flex items-center justify-center gap-x-6">
        <div
           class="rounded-md px-3.5 py-2.5 font-semibold text-white shadow-sm focus-visible:outline
           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
           bg-black btn
">
          <div
          class="sm:text-xl/8"
          >
            {{$i18n.enToGlobal("Go to Home Page")}}
          </div>
          <div
          class="sm:text-xl/2 font-normal"
          >{{"Go to Home Page"}}</div>
        </div>
<!--        <a href="#" class="text-sm font-semibold text-gray-900">Contact support <span-->
<!--            aria-hidden="true">&rarr;</span></a href="#">-->
        <div href="#" class="text-sm font-semibold text-gray-900 btn">
          <div>
          <div>{{$i18n.enToGlobal("Contact support")}}</div>
           <div
          class="sm:text-xl/2 font-normal"
          >{{"Contact support"}}</div>
          </div>

          <span
            aria-hidden="true">&rarr;</span></div>

      </div>
    </div>
  </main>

  <div
      @click="() => $refs.languageDialog.open()"
      class="language-box">
    <img
        class="language-icon"
        src="/language.svg"/>
  </div>
  <LanguageDialog
      ref="languageDialog"
  ></LanguageDialog>
</template>

<style lang="scss" scoped>
.img-404{
  width: 100px;
  height: 100px;
  margin-left: auto;
}

.btn{
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: pointer;
}

.btn:hover{
  opacity: .5;
}

.btn:active{
  opacity: .7;
}
</style>